<template>
  <div class="Speed" @click.stop="Click('hide')">
    <div class="content" @click.stop="hide" :style="{backgroundColor:Styles.backgroundColor}">
      <div class="fasr-div" :style="{color:Styles.color}">
        慢放
      </div>
      <div class="nth-div">
        <div class="Sizi-bg" ref="SiziBg" @touchstart="SiziStart" @touchmove="SiziMove" @touchend="SiziEnd">
          <div class="spans"
               :style="{ 'left': speed+'%',backgroundColor:Styles.backgroundColor,transform:'scale('+scale+')'}"></div>
          <div class="ruler" :style="{borderColor:Styles.borderColor}">
          </div>
          <div class="rulers">
            <div class="cm" :style="{borderColor:Styles.borderColor}"><i></i></div>
            <div class="cm" :style="{borderColor:Styles.borderColor}"><i></i></div>
            <div class="cm" :style="{borderColor:Styles.color}"><i></i></div>
            <div class="cm" :style="{borderColor:Styles.borderColor}"><i></i></div>
            <div class="cm" :style="{borderColor:Styles.borderColor}"><i></i></div>
            <div class="cm" :style="{borderColor:Styles.borderColor}"><i></i></div>
            <div class="cm" :style="{borderColor:Styles.borderColor}"><i></i></div>
          </div>
        </div>
      </div>
      <div class="last-div" :style="{color:Styles.color}">快放</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data: function () {
      return {
        speed: this.speeds || 28.6,
        scale: 1,
        Sizetouch: {
          x: 0,
          startProgress: 0
        }
      }
    },
    props: ['speeds', 'Styles'],
    methods: {
      hide: function (e) {
        return false
      },
      Click: function (str) {
        this.$emit(str)
      },
      SiziStart: function (e) {
        this.scale = 1.2
        this.Sizetouch.x = e.changedTouches[0].clientX
        this.Sizetouch.startProgress = this.speed
      },
      SiziMove: function (e) {
        this.scale = 1.2
        e && e.preventDefault()
        let touch = e.changedTouches[0]
        let offsetX = touch.clientX - this.Sizetouch.x
        let targetWidth = this.$refs.SiziBg.offsetWidth
        var fontSize = (Number((offsetX / targetWidth * 100).toFixed(2))) + this.Sizetouch.startProgress
        var num = 1
        if (fontSize >= 100 || fontSize < 90 && fontSize > 100) {
          this.speed = 100
          num = 2
        } else if (fontSize < 90 && fontSize > 78.65) {
          this.speed = 85.8
          num = 1.8
        } else if (fontSize < 78.65 && fontSize > 64.35) {
          this.speed = 71.5
          num = 1.6
        } else if (fontSize < 64.35 && fontSize > 50.05) {
          this.speed = 57.2
          num = 1.4
        } else if (fontSize < 50.05 && fontSize > 35.75) {
          this.speed = 42.9
          num = 1.2
        } else if (fontSize < 35.75 && fontSize > 21.45) {
          this.speed = 28.6
          num = 1
        } else if (fontSize < 21.45 && fontSize > 7.15) {
          this.speed = 14.3
          num = 0.8
        } else if (fontSize <= 0 || fontSize < 0 && fontSize > 7.15) {
          this.speed = 0
          num = 0.6
        }
        var obj = {
          Speed: num,
          X: this.speed
        }
        this.$emit('Speed', obj)
      },
      SiziEnd: function (e) {
        this.scale = 1
      }
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
